import React from 'react'

const height = window.screen.height;
let timeOut = null
let self = null

class ScrollList extends React.Component {
	constructor(){
		super()
		self = this
	}
	componentDidMount(){
		window.addEventListener('scroll',this.scrollLoad)
	}
	scrollLoad(){
		timeOut && window.clearTimeout(timeOut)	
		timeOut = setTimeout(function(){
			self.loadMore()
		}, 200);
	}
	componentWillUnmount(){
		window.removeEventListener('scroll',this.scrollLoad)
	}
	loadMore(){
		let y = window.scrollY,
			h = document.getElementById("scrollContent").offsetHeight;
			if(height + y > h){
				this.props.onScroll();
			}	
	}
	render(){
		let L = this.props.list
		return(

			<ol className="version" id="scrollContent" ref="scrollContent">
			  {
			  	this.props.data.map((item,index)=>{
			  		return (

						<li key={index} to={`/msg-detail-page/${index}`}>
							<a className="version-item" href="#">
								<div className="version-item-img">
									<img className="lazy"  src={item.imgUrl} style={{'transform-origin': '0px 0px 0px', opacity: 1, transform: 'scale(1, 1)'}}/>
								</div>
								<div className="version-item-intro">
									<div className="version-item-name">
										<p>{item.title}</p>
									</div>
									<div className="version-item-brief">
										<p>{item.desc}</p>
									</div>
									<div className="version-item-intro-price">
										<span>{item.price}</span>
									</div>
								</div>
							</a>
						</li>

					)
				})
			  }
			</ol>
		)
	}
}

export default ScrollList